<template>
  <div class="order-detail-page" v-if="order">
    <!-- 操作栏 -->
    <DetailAction :order="order" />
    <!-- 步骤条 组件xtx-steps.vue-->
    <!-- 步骤条-->
    <div class="detail-steps" style="padding:20px">
      <XtxSteps :active="order.orderState === 6 ? 1 : order.orderState">
        <XtxStep title="提交订单" :desc="order.createTime" />
        <XtxStep title="付款成功" :desc="order.payTime" />
        <XtxStep title="商品发货" :desc="order.consignTime" />
        <XtxStep title="确认收货" :desc="order.evaluationTime" />
        <XtxStep title="订单完成" :desc="order.endTime" />
      </XtxSteps>
    </div>
    <!-- 物流栏 -->
    <Suspense>
      <template #default>
        <DetailLogistics :order="order"></DetailLogistics>
      </template>
      <template #fallback>
        <div>loading....</div>
      </template>
    </Suspense>
    <!-- 订单商品信息 -->
    <div class="order-info">
      <!-- 商品列表 -->
      <h3>订单商品</h3>
      <table class="goods-table">
        <thead>
          <tr>
            <th width="400">商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>实付</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in order.skus" :key="item.id">
            <td>
              <a href="javascript:;" class="product">
                <img :src="item.image" alt="" />
                <div class="info">
                  <p class="name ellipsis">{{ item.name }}</p>
                  <p class="attrs ellipsis">{{ item.attrsText }}</p>
                </div>
              </a>
            </td>
            <td>¥{{ item.curPrice }}</td>
            <td>{{ item.quantity }}</td>
            <td>¥{{ item.realPay }}</td>
            <td>¥{{ item.realPay }}</td>
          </tr>
        </tbody>
      </table>
      <!-- 收货信息 -->
      <h3>收货信息</h3>
      <div class="info-box">
        <dl>
          <dt>收<i></i>货<i></i>人：</dt>
          <dd>{{ order.receiverContact }}</dd>
        </dl>
        <dl>
          <dt>联系方式：</dt>
          <dd>{{ order.receiverMobile }}</dd>
        </dl>
        <dl>
          <dt>收货地址：</dt>
          <dd>{{ order.receiverAddress }}</dd>
        </dl>
      </div>
      <!-- 支付方式及送货时间 -->
      <h3>支付方式及送货时间</h3>
      <div class="info-box">
        <dl>
          <dt>支付方式：</dt>
          <dd>180****1849</dd>
        </dl>
        <dl>
          <dt>送货时间：</dt>
          <dd>双休日、假日送货(适合于家庭地址)</dd>
        </dl>
      </div>
      <!-- 发票信息 -->
      <h3>发票信息</h3>
      <div class="info-box">
        <dl>
          <dt>发票类型：</dt>
          <dd>电子发票</dd>
        </dl>
        <dl>
          <dt>发票内容：</dt>
          <dd>日用品</dd>
        </dl>
        <dl>
          <dt>发票抬头：</dt>
          <dd>个人</dd>
        </dl>
      </div>
      <!-- 订单信息 -->
      <h3>订单信息</h3>
      <div class="info-box">
        <dl>
          <dt>订单编号：</dt>
          <dd>在线支付</dd>
        </dl>
        <dl>
          <dt>下单时间：</dt>
          <dd>{{ order.createTime }}</dd>
        </dl>
      </div>
      <!-- 汇总信息 -->
      <div class="sum-info">
        <div class="info">
          <div class="item">
            <label>商品件数：</label>
            <span>{{ order.totalNum }}件</span>
          </div>
          <div class="item">
            <label>商品总价：</label>
            <span>¥{{ order.totalMoney }}</span>
          </div>
          <div class="item">
            <label>运<i></i>费：</label>
            <span>{{ order.postFee }}</span>
          </div>
          <div class="item">
            <label>应付总额：</label>
            <span class="price">¥{{ order.payMoney }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看物流 -->
    <OrderLogistics ref="logisticsTarget"></OrderLogistics>
  </div>
</template>
<script>
import { findOrder } from '@/api/order'
import DetailAction from './components/detail-action'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import DetailLogistics from './components/detail-logistics.vue'
export default {
  name: 'OrderDetailPage',
  components: { DetailAction, DetailLogistics },
  setup() {
    // 发送请求，获取订单详情数据
    const route = useRoute()
    const order = ref(null)
    findOrder(route.params.id).then(res => {
      order.value = res.result
    })

    return {
      order
    }
  }
}
</script>
<style scoped lang="less">
.order-detail-page {
  background: #fff;
}
.order-info {
  padding: 0 50px;
  h3 {
    font-weight: normal;
    font-size: 16px;
    padding: 25px 5px;
  }
}
// 商品表格
.goods-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  th {
    font-weight: normal;
    line-height: 60px;
    background: #f5f5f5;
    &:first-child {
      text-align: left;
      padding-left: 20px;
    }
  }
  td {
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    &:first-child {
      padding-left: 20px;
      border-left: 1px solid #f5f5f5;
    }
    &:last-child {
      border-right: 1px solid #f5f5f5;
    }
  }
  .product {
    display: flex;
    padding: 20px 0;
    img {
      width: 70px;
      height: 70px;
      border: 1px solid #f5f5f5;
    }
    .info {
      align-self: center;
      padding-left: 20px;
      text-align: left;
      p {
        margin-bottom: 5px;
        width: 280px;
      }
      .attrs {
        color: #999;
      }
    }
  }
}
// 信息盒子
.info-box {
  border: 1px solid #f5f5f5;
  padding: 20px;
  dl {
    display: flex;
    line-height: 30px;
    dt {
      width: 80px;
      color: #999;
      font-size: 14px;
      i {
        display: inline-block;
        width: 0.5em;
      }
    }
    dd {
      flex: 1;
    }
  }
}
// 汇总信息
.sum-info {
  padding: 30px 30px 100px 30px;
  overflow: hidden;
  .info {
    width: 250px;
    height: 160px;
    float: right;
    font-size: 16px;
    .item {
      line-height: 40px;
      display: flex;
      label {
        width: 90px;
        i {
          display: inline-block;
          width: 2em;
        }
      }
      span {
        flex: 1;
        text-align: right;
        padding-right: 30px;
        &.price {
          font-size: 20px;
          color: @priceColor;
        }
      }
    }
  }
}
</style>
